<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="{STATIC_PATH}admin/lib/layui-v2.5.4/css/layui.css" media="all">
  <link rel="stylesheet" href="{STATIC_PATH}admin/css/public.css" media="all">
  <style>
    .inoutCls {
      height: 22px;
      line-height: 22px;
      padding: 0 5px;
      font-size: 12px;
      background-color: #1E9FFF;
      max-width: 80px;
      border: none;
      color: #fff;
      margin-left: 10px;
      display: inline-block;
      white-space: nowrap;
      text-align: center;
      border-radius: 2px;
      cursor: pointer;
    }


    .list-page {text-align:center;padding: 15px 15px;}
    .mws-panel-content {background: #eee;}
    .pagination {margin:0 !important;padding: 10px 10px;box-shadow: 0px 1px 2px 0px #E2E2E2;background: #fff;}
    .pagination li{border:1px solid #e6e6e6;padding: 3px 8px;display: inline-block;}
    .pagination .active{background-color: #46A3FF;color: #fff;}

  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
    <button type="button" class="layui-btn add">添 加</button>

    <div class="layui-form" style="margin-top: 20px;">
      <table class="layui-table">
        <colgroup>
          <col width="90">
          <col width="90">
          <col width="90">
          <col width="60">
          <col width="150">
          <col width="150">
          <col width=150>
          <col width="70">
        </colgroup>
        <thead>
        <tr>
          <th>id</th>
          <th>标题</th>
          <th>排序</th>
          <th class="text-center">创建时间</th>
          <th class="text-center">更新时间</th>
          <th class="text-center">状 态</th>
          <th>操作管理</th>
        </tr>
        </thead>
        <tbody>
        <!--一级类目循环-->
        {foreach $category as $item}
        <tr>
          <td>
            <div class="layui-input-inline">
              {$item.id}
            </div>
          </td>
          <td>
            <div class="layui-input-inline">
              <input type="text" name="p0" autocomplete="off" class="layui-input " value="{$item.name}"  onchange="editCls(this,id=1,ptype=1)"
                     >
            </div>
          </td>
          <!-- <td>
             &lt;!&ndash;二级类目循环 start&ndash;&gt;
             <div class="layui-input-block" style="margin-left: 0;">
               <button data-ptype="2" type="button"
                       class="layui-btn layui-btn-primary layui-btn-sm del-child"
                       style="border: none;"><i class="layui-icon"></i></button>
               <div class="layui-input-inline">
                 <input type="text" name="p1" style="background: #ffb800;" autocomplete="off"
                        class="inoutCls" onchange="editCls(this,id=1,ptype=2)" value="二级类目">
               </div>

               &lt;!&ndash; 三级类目循环 start&ndash;&gt;
               <div class="layui-input-inline">
                 &#45;&#45;<input type="text" name="p1" autocomplete="off" class="inoutCls"
                          onchange="editCls(this,id=1,ptype=3)" value="1。1">
               </div>
               <div class="layui-input-inline">
                 &#45;&#45;<input type="text" name="p1" autocomplete="off" class="inoutCls"
                          onchange="editCls(this,id=1,ptype=3)" value="1。2">
               </div>
               <div class="layui-input-inline">
                 &#45;&#45;<input type="text" name="p1" autocomplete="off" class="inoutCls"
                          onchange="editCls(this,id=1,ptype=3)" value="1。3">
               </div>
               &lt;!&ndash; 三级类目循环 end&ndash;&gt;
             </div>

             &lt;!&ndash;二级类目循环 end&ndash;&gt;
           </td>-->
          <td>
            <div class="layui-input-inline">
              <input type="text" name="p0" autocomplete="off"
                     value="{$item.listorder}"
                     data-id="{$item.id}"
                     class="changeSort layui-input"
                    >
            </div>
          </td>
          <td>{$item.create_time}</td>
          <td>{$item.update_time}</td>

          <td data-id="{$item.id}">
              <input type="checkbox"
                     {if $item.status == 1} checked {/if}
              name="status" lay-skin="switch"
              lay-filter="switchStatus"
              lay-text="ON|OFF">
          </td>


          <td>
            <a class="layui-btn layui-btn-xs layui-btn-normal" data-id="$id" href="{:url('index',['pid' => $item.id])}">获取子栏目</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete del-child" data-ptype="1"
               lay-event="delete" data-id="{$item.id}">删除</a>

          </td>
        </tr>
        {/foreach}
        <!--一级类目循环 end-->
        </tbody>
      </table>
    </div>
    {$category|raw}
<!--    <div id="pages"></div>-->
  </div>

</div>

<script src="{STATIC_PATH}admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="{STATIC_PATH}admin/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="{STATIC_PATH}admin/js/common.js?v5" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'laypage'], function () {


        // 添加 分类
        $('.add').on('click', function () {
            layObj.dialog('{:url("add")}')
        });

        // //监听状态 更改
        // form.on('switch(switchStatus)', function (obj) {
        //     console.log(obj.elem.checked, '改变状态')
        //
        //     let id = obj.othis.parent().attr('data-id');
        //     let status = obj.elem.checked ? 1 : 0;
        //     $.ajax({
        //         url: '{:url("admin/change")}?id=' + id + '&status=' + status,
        //         success: (res) => {
        //
        //         }
        //     });
        //     return false;
        // });


        function editCls(that, id, type) { // 分类修改  type 是 1 顶级  2级  3级
            let name = $(that).val();
            if (!name && (type == 1 || type == 2)) {
                return layObj.msg('分类名称不能为空')
            }
            if (!name && type == 3) { // 演示 应该放到修改回调中  进行处理
                return $(that).parent().remove()
            }
            let url = '{:url("admin/edit")}?id=' + id + '&name=' + name
            layObj.get(url, (res) => {
                if (name && res) {
                    $(that).val(name)
                }
            })
            $.ajax({
                url: '{:url("admin/edit")}?id=' + id + '&name=' + name,
                success(res) {
                    if (name && res) {
                        $(that).val(name)
                    }
                }
            })
        }

        // 删除二级分类
        $('.del-child').on('click', function () {
            let ptype = $(this).attr('data-ptype'); // fu
            let id = $(this).attr('data-id'); // fu
            let msg = '';
            if (ptype == 1) { // 等级类目
                msg = '一';
            } else if (ptype == 2) {
                msg = '二';
            }
            layObj.box(`是否删除${msg}级分类`, () => {
                let url = '{:url("category/categorydel")}?id=' + id
                layObj.get(url, (res) => {
                    if(res.status === 200){
                        layer.msg(res.msg,{time:500},()=>{
                            // window.location.reload()
                        })
                    }else{
                        layer.msg(res.msg,{time:500},()=>{
                            // window.location.reload()
                        })
                    }
                    $(this).parent().remove()
                })

            })
        })

        $('.changeSort').on('change', function () {
            let id = $(this).attr('data-id');
            let val = $(this).val();
            if (!val) {
                return;
            }
            let url = '{:url("category/listorder")}?id=' + id + '&listorder=' + val;
            // let url = 'http:www.baidu.com';
            layObj.get(url, function (res) {
                if(res.status === 200){
                    layer.msg(res.msg,{time:500},()=>{
                        window.location.reload()
                    })
                }else{
                    layer.msg(res.msg,{time:700})
                }
            })

        })
    })
</script>
</body>
</html>
